<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML>
<head>
<title>商品详情</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<link href="css/easy-responsive-tabs.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" href="css/global.css">
<script src="js/slides.min.jquery.js"></script>
<script>
		$(function(){
			$('#products').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				effect: 'slide, fade',
				crossfade: true,
				slideSpeed: 350,
				fadeSpeed: 500,
				generateNextPrev: true,
				generatePagination: false
			});
		});
	</script>
</head>
<body>
  <div class="wrap">

	<%@ include file="_common_header.jsp"%>

 <div class="main">
    <div class="content">
    	<div class="content_top">
    		<div class="back-links">
    		<p><a href="index">主页</a>>>><a style="length:100px;" href="detail?pid=${product.pid }">${product.pname }</a></p>
    	    </div>
    		<div class="clear"></div>
    	</div>
    	<div class="section group">
				<div class="cont-desc span_1_of_2" style="width:100%;">
				  <div class="product-details">				
					<div class="grid images_3_of_2">
						<div id="container">
						   <div id="products_example">
							   <div id="products">
								<div class="slides_container">
									<a href="#" target="_blank"><img src="${pageContext.request.contextPath }${product.pimage }" alt=" " /></a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="desc span_3_of_2">
					<h2>${product.pname }</h2>				
					<div class="price">
						<p>价格: <span>￥${product.shopPrice }</span></p>
					</div>
					<div class="available">
						<p>Available Options :</p>
					<ul>
						<li>颜色:
							<select>
							<option>银色</option>
							<option>黑色</option>
							<option>深灰色</option>
							<option>红色</option>
						</select></li>
						<li>尺寸:<select>
							<option>大</option>
							<option>中</option>
							<option>小</option>
						</select></li>
						<li>数量:<select>
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select></li>
					</ul>
					</div>
				<div class="share-desc">
					<div class="share">
						<p>分享到 :</p>
						<ul>
					    	<li><a href="#"><img src="images/facebook.png" alt="" /></a></li>
					    	<li><a href="#"><img src="images/twitter.png" alt="" /></a></li>					    
			    		</ul>
					</div>
					<div class="button"><span><a href="#">添加到购物车</a></span></div>					
					<div class="clear"></div>
				</div>
				 
			</div>
			<div class="clear"></div>
		  </div>
		<div class="product_desc">	
			<div id="horizontalTab">
				<ul class="resp-tabs-list">
					<li>详细信息</li>
					<div class="clear"></div>
				</ul>
				<div class="resp-tabs-container">
					<div class="product-desc">
						<p>${product.pdesc }</p>
					</div>

			</div>
		 </div>
	 </div>
	    <script type="text/javascript">
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion           
            width: 'auto', //auto or any width like 600px
            fit: true   // 100% fit in a container
        });
    });
   </script>		
   
   
        </div>
				
 		</div>
 	</div>
    </div>
 </div>
   

   <%@ include file="_common_footer.jsp"%>
   

   <script type="text/javascript">
		$(document).ready(function() {			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
	</script>
    <a href="#" id="toTop"><span id="toTopHover"> </span></a>
<div style="display:none"><script type="text/javascript">var cnzz_protocol = (("https:" == 
document.location.protocol) ? " https://" : " http://");document.write(unescape
("%3Cspan id='cnzz_stat_icon_1253604486'%3E%3C/span%3E%3Cscript src='" + 
cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1253604486' 
type='text/javascript'%3E%3C/script%3E"));</script></div>
</body>
</html>

